<template>
  <div id="app">
    <router-view></router-view>
    <van-tabbar
      class="tab-bar"
      v-if="isShowTabBar"
      v-model="active"
      active-color="#ee0a24"
      inactive-color="#000"
    >
      <van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/category" icon="smile-comment-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item to="/worth-buy" icon="photo-o">值得买</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item to="/center" icon="user-o">个人</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      active: 1, // 每个标签的索引
      isShowTabBar: true,
    };
  },
  // 监视路由的变化
  watch: {
    $route: {
      handler() {
        const { name } = this.$route;
        this.isShowTabBar = this.$route.meta.isShowTabBar;
        if (name === 'home') {
          this.active = 0;
        } else if (name === 'cart') {
          this.active = 3;
        }
      },
      immediate: true,
    },
  },

  methods: {
    // // 监听tabBar的改变
    // onChange() {
    //   console.log(this.active);
    // },
  },
  components: {},
};
</script>

<style lang="less" scoped>
#app {
  height: 100%;
}
.tab-bar {
  border-top: 1px solid #999;
}
</style>
